<template>
  <el-card class="m-b-20">
    <el-form ref="site-info-form" :model="siteInfo" label-width="200px">
      <el-form-item label="服务器地址" prop="system_address">
        <el-input v-model="siteInfo.system_address" :placeholder="system_address_placeholder" />
      </el-form-item>
      <el-form-item label="PC客户端版本" prop="pc_version">
        <el-col :span="6" class="m-r-5">
          <el-input v-model="siteInfo.pc_version" />
        </el-col>
        <el-col v-permission="['tool:site:edit']" :span="8">
          <el-upload
            class="upload-demo"
            :headers="headers"
            :action="uploadUrl"
            :data="desktopExtraData"
            :before-remove="beforeRemove"
            :limit="1"
            with-credentials
            accept=".exe, .zip, .rar"
            :on-success="handleSuccess"
            :on-exceed="handleExceed"
            :file-list="desktopFileList"
          >
            <el-button type="primary">上传附件</el-button>
          </el-upload>
        </el-col>
      </el-form-item>
      <el-form-item label="移动客户端版本" prop="app_version">
        <el-col :span="6" class="m-r-5">
          <el-input v-model="siteInfo.app_version" />
        </el-col>
        <el-col v-permission="['tool:site:edit']" :span="16">
          <el-upload
            class="upload-demo"
            :headers="headers"
            :action="uploadUrl"
            :data="mobileExtraData"
            :before-remove="beforeRemove"
            :limit="1"
            with-credentials
            accept=".apk"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :file-list="mobileFileList"
          >
            <el-button type="primary">上传附件</el-button>
          </el-upload>
        </el-col>
      </el-form-item>
      <el-form-item label="版权信息" prop="copyright">
        <el-input v-model="siteInfo.copyright" />
      </el-form-item>
      <el-form-item label="文件管理器根路径" prop="storage_root_path">
        <el-input v-model="siteInfo.storage_root_path" placeholder="linux系统：/，windows系统：c:" />
      </el-form-item>
      <el-form-item label="单页应用状态" prop="system_single_page">
        <el-radio-group v-model="siteInfo.system_single_page">
          <el-radio-button label="true">启用</el-radio-button>
          <el-radio-button label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="导航栏状态" prop="system_breadcrumb_enable">
        <el-radio-group v-model="siteInfo.system_breadcrumb_enable">
          <el-radio-button label="true">启用</el-radio-button>
          <el-radio-button label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="使用用例状态" prop="system_demo_enable">
        <el-radio-group v-model="siteInfo.system_demo_enable">
          <el-radio-button label="true">启用</el-radio-button>
          <el-radio-button label="false">禁用</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button v-permission="['tool:site:edit']" type="primary" :disabled="!siteInfo.site_name===undefined" @click="saveSites">保存</el-button>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import { siteSave } from '@/api/system/config'
import { deleteFile } from '@/api/tool/file'
import { getAuthenticationHeader } from "@/utils/store"

export default {
  name: 'SiteInfo',
  props: {
    siteInfo: {
      type: Object,
      default: () => {
        return {
          site_name: undefined,
          pc_version: undefined,
          app_version: undefined,
          copyright: undefined,
          system_address: undefined,
          storage_root_path: undefined,
          system_single_page: undefined,
          system_breadcrumb_enable: undefined,
          system_demo_enable: undefined
        }
      }
    }
  },
  data() {
    return {
      headers: getAuthenticationHeader(),
      uploadUrl: this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/api/file/upload`,
      desktopExtraData: {
        serverPath: '/mnt/storage/Soft',
        fileType: 'desktop'
      },
      mobileExtraData: {
        serverPath: '/mnt/storage/Soft',
        fileType: 'mobile'
      },
      desktopFileList: [],
      mobileFileList: []
    }
  },
  computed: {
    system_address_placeholder: {
      get() {
        return location.origin
      }
    }
  },
  methods: {
    handleExceed(files, fileList) {
      this.$modal.msgWarning(`只能选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleSuccess(response, file, fileList) {
      const fileId = response.param
      fileList.map((file_, index) => {
        if (file.name === file_.name) {
          file_.id = fileId
        }
        return file_
      })
    },
    beforeRemove(file, fileList) {
      this.$confirm(`确定移除 ${file.name}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFile({ key: file.id })
      }).catch(e => {})
    },
    saveSites() {
      let param = {
        site_name: undefined,
        pc_version: undefined,
        app_version: undefined,
        copyright: undefined,
        system_address: undefined,
        storage_root_path: undefined,
        system_single_page: undefined,
        system_breadcrumb_enable: undefined,
        system_demo_enable: undefined
      }
      param = this.$api.objectUpdate(param, this.siteInfo)
      siteSave(param).then(response => {
        this.$modal.msgSuccess(response.msg)
      }).catch(() => {})
    }
  }
}
</script>
